import { Card, Typography, Alert } from 'antd';
import React from 'react';

const { Text } = Typography;

// 定义组件props的类型
interface StatusDisplayProps {
  message?: string | null;
  status?: string | null;
}

const StatusDisplay: React.FC<StatusDisplayProps> = ({ message, status }) => {
  const getAlertType = (): 'info' | 'error' | 'success' | 'warning' => {
    if (!message) return 'info';
    if (message.includes('Error') || message.includes('失败')) return 'error';
    if (message.includes('成功')) return 'success';
    return 'info';
  };

  return (
    <Card title="系统状态">
      {message ? (
        <Alert 
          message={message} 
          type={getAlertType()}
          showIcon
        />
      ) : (
        <Text type="secondary">暂无系统消息</Text>
      )}
      
      {status && (
        <div style={{ marginTop: 16 }}>
          <Text type="secondary">当前状态: {status}</Text>
        </div>
      )}
    </Card>
  );
};

interface MessageModuleProps {
  message?: string | null;
  status?: string | null;
}

const MessageModule: React.FC<MessageModuleProps> = ({ message, status }) => {
  return (
    <StatusDisplay message={message} status={status} />
  );
};

export default MessageModule;